<template>
  <div>
    <!-- 编辑个人信息 -->
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      :rules="rules"
      label-width="80px"
      label-position="left"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model.number="ruleForm.username" :disabled="userinfo.username ? true : false"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input type="text" v-model="ruleForm.nickname" :placeholder="userinfo.nickname"></el-input>
      </el-form-item>
      <el-form-item v-if="userinfo.surname" label="姓" prop="surname">
        <el-input type="text" v-model="ruleForm.surname" :placeholder="userinfo.surname"></el-input>
      </el-form-item>
      <el-form-item v-else label="密码" prop="password">
        <el-input type="text" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model.number="ruleForm.phone" :placeholder="userinfo.phone"></el-input>
      </el-form-item>
    </el-form>
    <el-button size="mini" @click="$emit('updata', userinfo.username)">取消</el-button>
    <el-button type="primary" size="mini" @click="submitPass(userinfo.username)">确定</el-button>
  </div>
</template>

<script>
import { replyComment, addUser } from '@/api/user'
export default {
  name: 'CarInfo',
  props: ['userinfo'],
  data() {
    // 此处自定义校验手机号码js逻辑
    const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!!'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('请输入正确手机号'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      ruleForm: {
        username: this.userinfo.username,
        nickname: '',
        password: '',
        sex: '',
        surname: '',
        phone: ''
      },
      rules: {
        sex: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [{ type: 'number', required: true, validator: validatePhone, trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        surname: [
          { required: true, message: '请输入姓氏', trigger: 'blur' },
          { min: 1, max: 2, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        username: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 编辑
    submitPass(name) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (name) {
            const res = await replyComment({ ...this.ruleForm })
            if (res.data.statu == 200) {
              this.$message.success(res.data.msg)
              this.$emit('updata', 1)
            } else {
              this.$message.warning(res.data.msg)
            }
          } else {
            const res = await addUser({ ...this.ruleForm })
            if (res.data.statu == 200) {
              this.$message.success(res.data.msg)
              this.$emit('updata')
            } else {
              this.$message.warning(res.data.msg)
            }
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.h3 {
  margin: 15px;
  text-align: center;
}
</style>
